<template>
  <div id="check"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'

const emits = defineEmits(['change'])

const init = (info) => {
  const chart = echarts.init(document.getElementById('check'))

  const options = {
    colors: ['#e4c93c', '#ffffff'],
    grid: {
      top: '0', // 上边距
      bottom: '0', // 下边距
      left: '0', // 左边距
      right: '0' // 右边距
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}'
    },
    series: [
      {
        name: '检查数量',
        type: 'pie',
        radius: ['40%', '60%'],

        data: [
          {
            value: info.v6.three,
            name: '实地抽查',
            itemStyle: {
              color: '#922ADE' // 单独设置颜色
            }
          },
          {
            value: info.v6.two,
            name: '书面抽查',
            itemStyle: {
              color: '#005AFF' // 单独设置颜色
            }
          },
          {
            value: info.v6.four,
            name: '书面检查'
          },
          {
            value: info.v6.five,
            name: '实地检查'
          }
        ]
      }
    ]
  }
  chart.setOption(options)

  setTimeout(() => {
    chart.resize()
  }, 0)

  // 监听窗口大小变化，调整地图大小
  window.addEventListener('resize', () => {
    chart.resize()
  })

  //监听点击
  chart.on('click', (e) => {
    console.log('点击', e)
    emits('change', e.name)
  })
}
defineExpose({ init })
</script>
<style scoped lang="scss">
#check {
  width: 100%;
  height: 100%;
}
</style>
